<template>
  <section class="chart-room">
    <div class="message-box">
      <p v-if="showMore" style="text-align: center;color: #0d95e8;padding-top: .2rem" @click="watchMore">{{$t('chart.more')}}</p>
      <ul>
        <li class="item" v-for="(i, k) in feedback_list" :key="k">
          <div class="msg-detail my-msg"  >
            <div class="detail-container">
              <div class="detail-body">
                <div class="word">{{i.content}}</div>
                <div class="detail-img">
                  <ul class="img-list">
                    <li v-for="(y, k) in i.images" :key="k">
                      <img :src="y" alt="img">
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="avatar">
              <img :src="avatar" alt="avatar">
            </div>
          </div>
          <div class="msg-detail reply" v-if="i.reply" >
              <div class="avatar">
                <img src="../../assets/img/logo.png" alt="avatar">
                <p class="service-name">客服</p>
              </div>
              <div class="detail-container">
                <div class="detail-body">
                  <div class="word">{{i.reply}}</div>
                  <div class="detail-img">
                    <ul class="img-list">
                      <li v-for="(y, k) in i.reply_images" :key="k">
                        <img :src="y" alt="img">
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
        </li>
      </ul>
      <p v-if="feedback_list.length === 0" style="text-align: center;color: #898989;padding: .2rem"> {{$t('chart.nofeedBack')}}</p>
    </div>
  </section>
</template>

<i18n>
  title.charting:
    en: Service
    zh-CN: 客服
  chart.more:
    en: Loading More
    zh-CN: 查看更多消息
  chart.nofeedBack:
    en: No Feedback
    zh-CN: 没有反馈
</i18n>

<script>
  import {Cell, Group} from 'vux'
  export default {
    name: 'News',
    components: {
      Cell,
      Group
    },
    data () {
      return {
        feedback_list: [],
        page: 1,
        pageCount: 20,
        avatar: '',
        showMore: false,
        totalPages: ''
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.getInfo()
      },
      refresh () {},
      infinite () {},
      getInfo () {
        let vm = this
        let param = {
          token: localStorage.token,
          listRows: vm.pageCount,
          page: vm.page
        }
        vm.get({
          url: `/api/service/myQuestions`,
          params: param,
          success: function (data) {
            if (data.code === 0) {
              vm.$vux.toast.show({
                text: data.msg,
                type: 'text'
              })
            } else if (data.code === 1) {
              vm.totalPages = data.data.last_page
              vm.avatar = data.data.avatar
              if (data.data.last_page > 1) {
                vm.showMore = true
              }
              if (data.data.last_page === this.page) {
                vm.showMore = false
              }
              if (data.data.data && data.data.data.length > 0) {
                let list = data.data.data.map((i) => {
                  i.images ? i.images = i.images.split(',') : i.images = []
                  i.reply_images ? i.reply_images = i.reply_images.split(',') : i.reply_images = []
                  return i
                })
                vm.feedback_list = list.concat(vm.feedback_list)
              }
              console.log(vm.feedback_list)
            }
          }
        })
      },
      watchMore () {
        if (this.page < this.totalPages) {
          this.page = this.page + 1
          this.getInfo()
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .chart-room {
    padding-bottom: 30px;
    .message-box {
      height: 100%;
      .reply {
        text-align: left;
        .detail-container {
          margin-left: .2rem;
          position: relative;
          &:before {
            content: '';
            position: absolute;
            top: 8px;
            left: -16px;
            border: 8px solid #EEEEEE;
            border-top-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
            width: 0;
            height: 0;
          }
        }
      }
      .my-msg {
        text-align: right;
        justify-content: flex-end;
        .detail-container {
          margin-right: .3rem;
          position: relative;
          &:before {
            content: '';
            position: absolute;
            top: 8px;
            right: -16px;
            border: 8px solid #EEEEEE;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            width: 0;
            height: 0;
          }
        }
      }
      .msg-detail {
        display: flex;
        padding: .2rem;
        .avatar　 {
          line-height: 1;
          font-size: 0;
          width: 1.2rem;
          height: 1.2rem;
          flex-shrink: 0;
          .service-name{
            padding: .1rem 0;
            color: #898989;
            font-size: .3rem;
            text-align: center;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .detail-container {
          flex-shrink: 1;
          .detail-body {
            border-radius: 8px;
            background-color: #EEEEEE;
            padding: .2rem;
            .word {
              font-size: .3rem;
            }
          }
          .img-list {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            margin-top: .1rem;
            li{
              width: 80px;
              height: 80px;
              padding: 0 .1rem .1rem 0;
              img{
                width: 100%;
                height: 100%
              }
            }
          }
        }
      }
    }
  }
</style>
